<template>
  <div class="qr-code">
    <div>
      <div class="code-box"
        :style="{width:`${width}px`,height:`${height}px`}"
        :class="{'code-timeout': payStatus==='timeout'}">
        <!-- <div v-show="!error || payStatus==='timeout'"
          v-loading="loading"
          ref="qrCode"
          key="code"></div> -->
          <div class="qrcode"
            ref="qrcode"
            v-show="!error || payStatus==='timeout'"
            v-loading="loading">
            <img :src="qrCodeImg">
          </div>

        <div v-show="error"
          class="refresh"
          key="refresh">
          <svg-icon @click.native="getOrderInfo"
            icon-class="code-refresh" />
        </div>
      </div>
      <div class="text-error"
        v-if="error">{{error}}</div>
    </div>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import { getOrderInfo, checkOrderInfo } from './api'
export default {
  name: 'XZQRCode',
  props: {
    orderInfo: {
      type: Object,
      require: true
    },
    width: {
      type: Number,
      default: 132
    },
    height: {
      type: Number,
      default: 132
    }
  },
  data () {
    return {
      loading: true,
      qrcode: null,
      times: 0,
      timer: null,
      payType: {},
      error: '',
      payStatus: 'wait'
    }
  },
  watch: {
    'orderInfo.orderid': {
      handler (val) {
        this.payStatus = 'wait'
        if (val) this.getOrderInfo()
      },
      immediate: true
    }
  },
  mounted () {
    const container = this.$refs.qrCode
    this.qrcode = new QRCode(container, {
      text: this.text,
      width: this.width,
      height: this.height,
      colorDark: '#000000',
      colorLight: '#ffffff',
      correctLevel: 0
    })
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    setTime () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        if (this.times <= 0) {
          this.emitStatusChange(2)
        } else {
          this.times--
        }
        if (this.times % 3 === 0 && !this.onCheck) {
          this.checkOrderInfo()
        }
      }, 1000)
    },
    // 获取订单信息
    getOrderInfo () {
      this.loading = true
      const params = Object.assign({}, this.orderInfo)
      getOrderInfo(params).then(res => {
        this.loading = false
        this.error = ''
        const data = res.data
        this.times = data.expire
        if (this.times <= 0) {
          this.emitStatusChange(2)
        } else {
          this.qrcode && this.qrcode.makeCode(data.payURL)
          this.qrcode._el.title = ''
          this.orderInfos = params // 保存订单信息，预防外面的订单ID变化，订单状态轮询才能一一对应
          this.setTime()
        }
      }).catch(() => {
        this.error = '出现错误，请刷新二维码'
        this.loading = false
      })
    },
    checkOrderInfo () {
      this.onCheck = true
      checkOrderInfo(this.orderInfos).then(res => {
        const data = res.data || {}
        this.onCheck = false
        this.emitStatusChange(data.status)
      }).catch(() => {
        this.onCheck = false
      })
    },
    // 状态发生改变通知 0-已完成  2-订单已取消
    emitStatusChange (status) {
      if (status === 0) {
        clearInterval(this.timer)
        this.payStatus = 'succes'
        this.$emit('onStatusChange', this.payStatus)
      } else if (status === 2) {
        clearInterval(this.timer)
        this.error = '订单超时，请重新下单'
        this.payStatus = 'timeout'
        this.$emit('onStatusChange', this.payStatus)
      }
    }
  }
}

</script>
<style lang="scss" scoped>
@import "@/theme/common/var";
.qr-code {
  position: relative;
  text-align: center;
  .code-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    &.code-timeout{
      /deep/img{
        width: 120px;
        height: 120px;
      }
      .refresh{
        background: transparent;
        opacity:1;
        backdrop-filter: blur(4px);
        .svg-icon{
          display: none;
        }
      }
    }
  }
  /deep/img {
    -webkit-user-drag: none;
  }
  .refresh {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000;
    opacity: 0.6;
    .svg-icon {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      font-size: 36px;
      color: #fff;
      cursor: pointer;
      &:hover {
        color: $--color-primary;
      }
    }
  }
  .text-error {
    position: absolute;
    bottom: -20px;
    font-size: 12px;
    color: #fc5b42;
  }
}
</style>
